<template>
    <el-form class="login_form" ref="ruleFormRef" :model="userinfo" :rules="rules" label-position="top">
        <h1 class="logtitle">欢迎登录</h1>
        <div class="loguser">
            <el-form-item prop="username">
                <el-input v-model.trim="userinfo.username" placeholder="请输入登录账号" maxlength="11" clearable
                    size="large" />
            </el-form-item>
        </div>
        <div class="logpwd">
            <el-form-item prop="password">
                <el-input v-model.trim="userinfo.password" type="password" placeholder="请输入密码" maxlength="16"
                    show-password size="large" />
            </el-form-item>
        </div>
        <div class="logbtn">
            <el-form-item>
                <el-button class="log_btn" size="large" type="primary" plain @click="submitForm">登录</el-button>
            </el-form-item>
        </div>
    </el-form>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted, onUnmounted } from "vue";
import url from "../../common/js/APIUtil";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'

//表单数据
const userinfo = reactive({
    username: "",
    password: "",
});

const { proxy } = getCurrentInstance();
const router = useRouter();

//表单验证
const ruleFormRef = ref();
const rules = reactive({
    username: [
    {
        required: true,
        message: "账号不能为空",
        trigger: "blur",
    },
    { min: 5, max: 16, message: "账号长度不能小于5位", trigger: "blur" },
    ],
    password: [
    {
        required: true,
        message: "密码不能为空",
        trigger: "blur",
    },
    { min: 6, max: 18, message: "密码长度不能小于6位", trigger: "blur" },
    ],
});

//提交登录信息
const submitForm = () => {
    ruleFormRef.value.validate((valid) => {
    if (valid) {
        proxy.$http({
                method: "post",
                url:url.API_POST_LOGIN,
                data:{
                        username:userinfo.username,
                        password:userinfo.password
                },
            })
            .then((res) => {
                const data = res.data;
                if (data.code === 200) {
                sessionStorage.setItem("username", JSON.stringify(data.data));
                sessionStorage.setItem("id",data.data.id)
                ElMessage.success("登录成功");
                router.push({
                    path: "/",
                    params: { name: data.data.name },
                });
                proxy.$router.back()
                } else if (data.code === 222) {
                    ElMessage.warning("账号或密码错误");
                } else {
                    ElMessage.warning("未知错误");
                }
            });
    } else {
        ElMessage.warning("请调整数据再请求");
        return false;
    }
    });
};
onMounted(() => {
    window.addEventListener('keydown', keyDown)
})
const keyDown = (e) => {
    if (e.keyCode === 13) {
        submitForm();
    }
}
onUnmounted(() => {
    window.removeEventListener('keydown', keyDown, false)
})
</script>

<style scoped>

.login_form{
    justify-content: center;
    align-items: center;
    transform: translate(0%, 20%);
}
.logtitle{
    transform: translate(22%, -10%);
}
.loguser{
    width: 60%;
    transform: translate(35%, 40%);
}
.logpwd{
    width: 60%;
    transform: translate(35%, 70%);
}
.logbtn{
    width: 60%;
    transform: translate(35%, 105%);
}
.log_btn {
  width: 100%;
  height: 100%;
}
</style>